<template>
  <div>
    <span>统计时间：</span>
    <el-select
      v-model="value"
      placeholder="请选择"
      style="margin-right: 15px; width: 100px"
    >
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      >
      </el-option>
    </el-select>
    <el-date-picker
      v-if="value == '天'"
      v-model="value1"
      align="right"
      type="date"
      placeholder="选择日期"
      :picker-options="pickerOptions"
      @change="getDate"
    >
    </el-date-picker>
    <el-date-picker
      id="getWeek"
      v-if="value == '周'"
      v-model="value2"
      :picker-options="pickerOptions"
      type="week"
      format="yyyy 第 WW 周"
      placeholder="选择周"
      @change="getDate"
    >
    </el-date-picker>
    <el-date-picker
      v-if="value == '月'"
      v-model="value3"
      type="month"
      placeholder="选择月"
      @change="getDate"
    >
    </el-date-picker>
    <el-date-picker
      v-if="value == '年'"
      v-model="value4"
      type="year"
      placeholder="选择年"
      @change="getDate"
    >
    </el-date-picker>
  </div>
</template>

<script>
import utils from "../../js/index";
export default {
  watch: {
    value(a, b) {
      this.value1 = "";
      this.value2 = "";
      this.value3 = "";
      this.value4 = "";
    },
    deep: true,
  },
  data() {
    return {
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            },
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            },
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            },
          },
        ],
      },
      options: [
        {
          value: "天",
          label: "天",
        },
        {
          value: "周",
          label: "周",
        },
        {
          value: "月",
          label: "月",
        },
        {
          value: "年",
          label: "年",
        },
      ],
      value: "天",
      value1: new Date().setDate(new Date().getDate() - 1),
      value2: "",
      value3: "",
      value4: "",
    };
  },
  mounted() {},
  methods: {
    getDate(date) {
      var senData;
      switch (this.value) {
        case "天":
          senData = utils.utils.NewDateYear(date);
          break;
        case "周":
          senData = [
            new Date(date).getFullYear(),
            utils.utils.getWeekInYear(date),
          ];
          break;
        case "月":
          senData = [
            new Date(date).getFullYear(),
            new Date(date).getMonth() + 1,
          ];
          break;
        case "年":
          senData = new Date(date).getFullYear();
          break;
        default:
          break;
      }
      this.$emit("success", senData, this.value);
    },
  },
};
</script>
